<template>
  <!-- 标的要素 -->
  <div style="font-size: 16px">
    <div class="flex items-center justify-between mt-[30px] mb-[20px]">
      <div class="flex items-center">
        <div class="w-[4px] h-[12px] bg-[#EF6800]"></div>
        <div class="ml-[10px] text-[#EF6800] font-bold">标的要素</div>
      </div>
    </div>

    <el-form-item label="工程名称" prop="name">
      <el-input
        :disabled="disabled"
        placeholder="请输入工程名称"
        style="width: 318px"
        class="w-[318px]"
        v-model="Info.name"
      ></el-input>
    </el-form-item>
    <div class="flex">
      <el-form-item label="工程造价" prop="name">
        <el-input
          :disabled="disabled"
          @input="inputChange"
          type="number"
          oninput="this.value = this.value && parseInt(this.value);this.value < 0 || this.value>1000000 && (this.value = 1000000)"
          placeholder="请输入工程造价"
          v-model="Info.price"
          style="width: 318px"
          class="w-[318px]"
        ></el-input>
        <span class="ml-[5px]">元</span>
      </el-form-item>
    </div>
    <!-- <el-form-item label="设备造价" prop="name">
      <el-input
        :disabled="disabled"
        placeholder="请输入设备造价"
        style="width: 318px"
        class="w-[318px]"
        v-model="Info.price"
      ></el-input>
    </el-form-item> -->

    <!-- <el-form-item label="方案" prop="name">
      <el-select v-model="Info.fanan">
        <el-option
          v-for="item in fananList"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
    </el-form-item> -->
    <!-- <el-form-item label="房屋建筑结构" prop="name" v-if="route.query.id != 1">
      <el-input
        placeholder="请选择房屋建筑结构"
        v-model="Info.structure"
        style="width: 318px"
        class="w-[318px]"
      ></el-input>
    </el-form-item> -->

    <el-form-item label="工程地址" prop="name">
      <div class="flex w-full">
        <div class="flex w-[180px]">
          <el-select v-model="Info.province" :disabled="disabled">
            <el-option
              @click="handleProvinceSelect(item)"
              v-for="item in regionData"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
          <div class="ml-[5px] whitespace-nowrap">省/直辖市</div>
        </div>
        <div class="ml-[60px] flex w-[150px]">
          <el-select
            v-model="Info.city"
            :disabled="!Info.province || cityList!.length == 0 || disabled"
          >
            <el-option
              @click="handleCitySelect(item)"
              v-for="item in cityList"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
          <span class="ml-[5px]">市</span>
        </div>
        <div class="ml-[60px] flex w-[150px]">
          <el-select
            v-model="Info.area"
            :disabled="
              !Info!.province || !Info!.city || areaList!.length == 0 || disabled
            "
          >
            <el-option
              @click="handleAreaSelect(item)"
              v-for="item in areaList"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
          <span class="ml-[5px]">区</span>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="工程详细地址" prop="name">
      <el-input
        :disabled="disabled"
        placeholder="请输入工程详细地址"
        style="width: 318px"
        class="w-[318px]"
        v-model="Info.address"
      ></el-input>
      -
      <el-input
        :disabled="disabled"
        placeholder="请输入铺位号或具体点位"
        style="width: 318px"
        class="w-[318px] ml-[5px]"
        v-model="Info.room_no"
      ></el-input>
    </el-form-item>
    <!-- <el-form-item label="施工详细地址" prop="name">
      <el-input
        :disabled="disabled"
        placeholder="请输入XX省XX市XX区XX路XX某商场"
        style="width: 580px"
        v-model="Info.address"
        class="mr-[5px]"
      ></el-input
      >-
      <el-input
        :disabled="disabled"
        placeholder="请输入铺位号或具体点位"
        style="width: 318px"
        class="w-[318px] ml-[5px]"
        v-model="Info.room_no"
      ></el-input>
    </el-form-item> -->
    <!-- <el-form-item label="开始时间 " prop="name">
      <el-date-picker
        :disabled="disabled"
        v-model="Info.start_date"
        type="date"
        :disabled-date="disabledDate1"
        placeholder="请选择开始时间"
        style="width: 318px"
        class="w-[318px]"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        @change="pickerChanges($event, 1)"
      />
    </el-form-item> -->
    <!-- <el-form-item label="结束时间 " prop="name">
      <el-date-picker
        :disabled="true"
        v-model="Info.end_date"
        placeholder="请选择结束时间"
        type="date"
        style="width: 318px"
        class="w-[318px]"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        @change="pickerChanges($event, 2)"
      />
    </el-form-item> -->
    <!-- <el-form-item label="活动类型" prop="name">
      <el-select
        :disabled="disabled"
        v-model="Info.active_type"
        placeholder="请选择活动类型"
        filterable
        style="width: 318px"
      >
        <el-option
          v-for="(items, key) in activeList"
          :key="key"
          :label="items.name"
          :value="items.name"
        />
      </el-select>
 
    </el-form-item> -->
    <!-- <el-form-item label="商铺号/房间号" prop="name">
      <el-input
        placeholder="请输入商铺号/房间号"
        style="width: 318px"
        v-model="Info.room_no"
        class="w-[318px]"
      ></el-input>
    </el-form-item> -->
    <!-- <el-form-item label="职业类别" prop="name" v-if="route.query.id == 1">
      <el-select v-model="Info.address">
        <el-option
          v-for="item in arrressList"
          :label="item.address"
          :value="item"
        />
      </el-select>
    </el-form-item> -->
  </div>
</template>
<script setup lang="ts">
import {
  defineProps,
  PropType,
  defineExpose,
  defineEmits,
  reactive,
  ref,
  watchEffect,
  computed,
  ComputedRef,
} from "vue";
import { codeToText } from "element-china-area-data";
import { homeGetAddress } from "@/utils/api";
import { regionData } from "element-china-area-data";
import { useRoute } from "vue-router";
const props = defineProps({
  treetop: { type: Object } as any, //数据回显
  fananList: { type: Array },
  disabled: { type: Boolean, default: false },
});
interface CityList {
  label: string;
  value: string;
}
interface infoType {
  name: string;
  price: string;
  area_num: string;
  province: string;
  city: string;
  area: string;
  start_date: string;
  end_date: string;
  province_code: string;
  city_code: string;
  area_code: string;
  address: string;
  active_type: string;
  room_no: string;
}

const Info = reactive<infoType>({
  name: "",
  price: "",
  area_num: "",
  province: "",
  city: "",
  area: "",
  start_date: "",
  end_date: "",
  province_code: "",
  city_code: "",
  area_code: "",
  address: "",
  active_type: "",
  room_no: "",
});
const route = useRoute();
const arrressList = ref([] as any[]);
const fananList = ref([] as any[]);
interface AreaList {
  label: string;
  value: string;
}
interface RegionData {
  label: string;
  value: string;
}

const emit = defineEmits(["pickerChange", "inputChange"]);
watchEffect(() => {
  if (props.treetop) {
    let key: keyof infoType;
    for (key in Info) {
      if (props.treetop[key]) {
        Info[key] = props.treetop[key];
      }
    }
  }
  if (props.fananList) {
    fananList.value = props.fananList;
  }
});
const getData = async () => {
  const res = await homeGetAddress("");
  // console.log(res);
  arrressList.value = res.msg;
};
getData();
const disabledDate1 = (time: Date) => {
  // 1是开始时间 2是结束时间
  return time.getTime() < Date.now();
};

const address = reactive<{
  province: string;
  city: string;
  area: string;
}>({
  province: "",
  city: "",
  area: "",
});
interface AreaList {
  value: string;
  label: string;
  children?: AreaList[];
}
//切换省份函数
const handleProvinceSelect = (v: any) => {
  // address.city = "";
  // address.area = "";

  Info.province = v.label;
  Info.province_code = v.value;
  Info.city = "";
  Info.area = "";
  console.log(Info.province_code);
};
//选择时间
const pickerChanges = (v: any, index: number) => {
  //1是开始时间 2是结束时间
  var timestr = v.replace(/-/g, "/");
  var timestamp = new Date(timestr).getTime();
  emit("pickerChange", timestamp, index);
};
const inputChange = (v: any) => {
  emit("inputChange", v);
};
// const getAddress = ({
//   name,
// }: {
//   code: string[];
//   name: string[];
//   isComplete: boolean;
// }) => {
//   console.log(name);
// };
//切换城市函数
const handleCitySelect = (val: any) => {
  // address.area = "";
  Info.city = val.label;
  Info.city_code = val.value;
  Info.area = "";
  console.log(Info.city_code);
};
//切换地区函数
const handleAreaSelect = (value: any) => {
  Info.area = value.label;
  Info.area_code = value.value;
  console.log(Info.area_code);
};
//二级城市列表
const cityList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
  if (!Info.province) {
    return [];
  }

  let temp = regionData.find((item: any) => {
    return item.label == Info.province;
  });

  return temp!.children ? temp!.children : [];
});
const areaList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
  if (!Info.province || !Info.city) {
    return [];
  }
  if (cityList.value.length == 0) {
    return [];
  } else {
    //  console.log(cityList.value);

    let temp = cityList.value.find((item: any) => {
      return item.label == Info.city;
    });

    if (temp) {
      // console.log(temp);

      return temp.children ? temp.children : [];
    } else {
      return [];
    }
  }
});

//详细地址选中
const seleceChange = (v: any) => {
  Info.address = v.address;
};
defineExpose({
  //   handleProvinceSelect,
  Info,
});
</script>
